<template>
	<view class="box">
		<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" :display-multiple-items="2">
			<swiper-item circular class="swiper-item" v-for="(item, index) in list" :key="index" @click="navTo(item.id)">
				<view class="item">
					<image :src="item.pic_url[0].pic_url" mode="aspectFill"></image>
					<text class="u-line-3">{{ item.title }}</text>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: []
		};
	},
	methods: {
		async getList() {
			const res = await this.$request({
				url:
					this.$api.cases.index +
					'&page=1&region=%5B%5D&search_list=%5B%5B%7B%22value%22%3A8%2C%22text%22%3A%22%E7%94%9F%E4%BA%A7%E5%AE%9E%E5%8A%9B%22%2C%22pic_url%22%3A%22%22%2C%22type%22%3A%22class%22%2C%22select%22%3Atrue%7D%5D%5D&keyword=&add_cat_id=0&limit=9999'
			});
			if (res.code == 0) {
				this.list = res.data.list;
			}
		},
		navTo(id) {
			uni.navigateTo({
				url: '/pages/cases/detail?id=' + id
			});
		}
	},
	created() {
		this.getList();
	}
};
</script>

<style lang="scss" scoped>
.box {
	background-color: #f6f6f6;
	padding: 20upx 20upx;
}
.swiper {
	height: 340upx;
	.swiper-item {
		box-sizing: border-box;
		padding: 20upx;
		.item{
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			box-shadow: rgba(0, 0, 0, 0.05) 0 0 5px 3px;
			image {
				width:348rpx;
				height: 240rpx;
			}
			text {
				font-size: 0.8em;
				color: #737373;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-family: '黑体';
				padding: 10upx;
			}
		}
	}
}
</style>
